<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragment :: head">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | User Profile</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="../../static/plugins/selectize/css/selectize.default.css">

    <!-- Theme style -->
    <link rel="stylesheet" href="../../static/css/adminlte.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../../static/plugins/fontawesome-free/css/all.min.css">

</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!-- Navbar -->
    <nav th:replace="admin/_fragment  ::Navbar" class="main-header navbar navbar-expand navbar-white navbar-light">
        <!-- Left navbar links -->
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fa fa-bars"></i></a>
            </li>
        </ul>

        <!-- Right navbar links -->
        <ul class="navbar-nav ml-auto">
            <!-- Messages Dropdown Menu -->
            <li class="nav-item dropdown">
                <a class="nav-link" href="../index.html">
                    <i class="fa fa-paper-plane"></i>
                    <span>博客前台首页</span>
                </a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->
    <aside th:replace="admin/_fragment  ::MainSidebarContainer(5)"
           class="main-sidebar sidebar-dark-primary elevation-4">
        <!-- Brand Logo -->
        <h1>
            <a href="../index.html" class="brand-link">
                <img src="../../static/upload/avatar.jpg" class="brand-image img-circle elevation-3">
                <span class="brand-text font-weight-light">ZengZK's Blog</span>
            </a>
        </h1>

        <!-- Sidebar -->
        <div class="sidebar">
            <!-- Sidebar Menu -->
            <nav class="mt-2">
                <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
                    data-accordion="false">
                    <!-- Add icons to the links using the .nav-icon class
                         with font-awesome or any other icon font library -->
                    <li class="nav-header">仪表盘</li>
                    <li class="nav-item">
                        <a href="dashboard.html" class="nav-link">
                            <i class="nav-icon fas fa-tachometer-alt"></i>
                            <p>仪表盘</p>
                        </a>
                    </li>
                    <li class="nav-header">博客编辑</li>
                    <li class="nav-item">
                        <a href="edit.html" class="nav-link">
                            <i class="nav-icon fas fa-edit"></i>
                            <p>发布博客</p>
                        </a>
                    </li>
                    <li class="nav-header">管理模块</li>
                    <li class="nav-item">
                        <a href="blog-mgr.html" class="nav-link">
                            <i class="fa fa-list-alt nav-icon"></i>
                            <p>博客管理</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="category-mgr.html" class="nav-link">
                            <i class="fa fa-bookmark nav-icon"></i>
                            <p>分类管理</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="tag-mgr.html" class="nav-link active">
                            <i class="fa fa-tags nav-icon"></i>
                            <p>标签管理</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="comment-mgr.html" class="nav-link">
                            <i class="fa fa-comments nav-icon"></i>
                            <p>评论管理</p>
                        </a>
                    </li>
                    <li class="nav-header">系统管理</li>
                    <li class="nav-item">
                        <a href="configuration.html"
                           class="nav-link">
                            <i class="fa fa-wrench nav-icon"></i>
                            <p>系统配置</p>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="../index.html" class="nav-link">
                            <i class="fa fa-sign-out-alt nav-icon"></i>
                            <p>安全退出</p>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- /.sidebar-menu -->
        </div>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper mt-3">
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <!-- /.col -->
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">标签列表</h3>
                        </div>
                        <!-- /.card-header -->
                        <div class="card-body table-responsive p-0">
                            <table class="table table-hover text-nowrap table-bordered">
                                <thead>
                                <tr>
                                    <th width="5%"></th>
                                    <th>标签名称</th>
                                    <th>创建时间</th>
                                    <th>更新时间</th>
                                    <th class="text-center" width="15%">
                                        操作
                                        <button class="btn btn-xs btn-info ml-2" data-toggle="modal"
                                                data-target="#addTagModal">
                                            <i class="fa fa-plus"></i>
                                            新增
                                        </button>
                                    </th>
                                </tr>
                                </thead>
                                <span style="  margin-left: 50px; color: #00b44e ;font-size: 20px">共</span>
                                <span style="  margin-left: 50px; color: #00b44e ;font-size: 20px"
                                      th:text="${counttag}"></span>
                                <span style="  margin-left: 50px; color: #00b44e ;font-size: 20px">条</span>
                                <span style="  margin-left: 50px; color: #00b44e ;font-size: 20px">共</span>
                                <span style="  margin-left: 50px; color: #00b44e ;font-size: 20px"
                                      th:text="${pageAll}"></span>
                                <span style="  margin-left: 50px; color: #00b44e ;font-size: 20px">页</span>
                                <span style="  margin-left: 50px; color: #00b44e ;font-size: 20px">第</span>
                                <span style="  margin-left: 50px; color: #00b44e ;font-size: 20px"
                                      th:text="${pageindex}"></span>
                                <span style="  margin-left: 50px; color: #00b44e ;font-size: 20px">页</span>
                                <tbody>
                                <tr th:each=" tag:${taglist}">
                                    <td class="text-center" th:text="${tag.id}">1</td>
                                    <td th:text="${tag.name}">HTML</td>
                                    <td th:text="${{#dates.format(tag.createTime,'yyyy-MM-dd HH:mm:ss')}}">HTML</td>
                                    <td th:text="${{#dates.format(tag.updateTime,'yyyy-MM-dd HH:mm:ss')}}">HTML</td>
                                    <td class="text-center">
                                        <button onclick="tomodifytag(this)"
                                                th:attr="data-id=${tag.id},data-name=${tag.name}"
                                                class="btn btn-xs btn-success"
                                                data-toggle="modal"
                                                data-target="#updateTagModal">
                                            <i class="fa fa-edit"></i>
                                            修改
                                        </button>
                                        <button onclick="todeletetag(this)" th:attr="data-id=${tag.id}"
                                                class="btn btn-xs btn-danger ml-2" data-toggle="modal"
                                                data-target="#deleteTagModal">
                                            <i class="fa fa-trash"></i>
                                            删除
                                        </button>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.card-body -->
                        <div class="card-footer clearfix">
                            <ul class="pagination pagination-sm m-0 float-right">
                                <li class="page-item"><a th:if="${pageindex}!=1" class="page-link" href="#"
                                                         th:href="@{/admin/totagpage(pageindex=${pageindex}-1)}"><i
                                        class="fa fa-angle-left"></i></a>
                                </li>
                                <li class="page-item"><a class="page-link" href="#"
                                                         th:href="@{/admin/totagpage(pageindex=1)}">1</a>
                                </li>
                                <li class="page-item"><a class="page-link" href="#"
                                                         th:href="@{/admin/totagpage(pageindex=2)}">2</a></li>
                                <li class="page-item"><a class="page-link" href="#"
                                                         th:href="@{/admin/totagpage(pageindex=3)}">3</a></li>
                                <li class="page-item"><a th:if="${pageindex}!=${pageAll}" class="page-link" href="#"
                                                         th:href="@{/admin/totagpage(pageindex=${pageindex}+1)}"><i
                                        class="fa fa-angle-right"></i></a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- /.card -->
                </div>
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer th:replace="admin/_fragment  ::foot" class="main-footer">
        <p class="text-center mb-1">
            Copyright © 2020 ZengZK Designed by ZengZK Powered by AdminLTE
        </p>
        <p class="text-center">
            <a href="">粤ICP备20040058号</a>
        </p>
    </footer>
</div>
<!-- ./wrapper -->

<div class="modal fade" id="addTagModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">新增标签</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <span id="span01" style="color: red"></span>

            <div class="modal-body">
                <input type="text" id="tagInput" name="tag" value="前端,后端">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button id="addTagBtn" type="button" onclick="checktag()" class="btn btn-success">新增</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="updateTagModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">修改标签</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <input class="form-control" type="text" id="tagbtn" name="tag" value="前端1">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button id="updateTagBtn" onclick="modifytag(this)" type="button" class="btn btn-success">修改</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<div class="modal fade" id="deleteTagModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">删除标签</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="m-0">你确定要删除吗？</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button id="deleteTagBtn" onclick="deletetag(this)" type="button" class="btn btn-danger">删除</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
jQuery

<div th:replace="admin/_fragment :: js">
    <!-- jQuery -->
    <script src="../../static/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="../../static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

    <script src="../../static/plugins/selectize/js/standalone/selectize.min.js"></script>


    <!-- AdminLTE App -->
    <script src="../../static/js/adminlte.min.js"></script>
    <script src="../../static/js/categoryinput.init.js"></script>
</div>


<script>

    function tomodifytag(obj) {
        // alert('test')
        var id = $(obj).attr('data-id')
        var name = $(obj).attr('data-name')
        // alert(id + name)
        document.getElementById('updateTagBtn').value = id + '+' + name
        document.getElementById('tagbtn').value = name
        //
    }

    function modifytag(obj) {
        // alert('modifytype')
        var str = obj.value;
        var strname = str.substring(str.indexOf('+') + 1)
        var strid = str.substring(0, str.indexOf('+'))
        // alert(strname + strid)
        // alert(str)
        var tagname = document.getElementById('tagbtn').value
        $.ajax({
            url: '/admin/modifytag',
            data: {'tagid': strid, 'tagname': tagname},
            success: function (data) {
                if (data == 'success') {
                    alert('修改成功！')
                    location.href = '/admin/totagpage'
                } else {
                    alert('修改失败！')
                }
            }
        })

        // alert(strid)
    }

    function checktag() {
        var tagInput = document.getElementById('tagInput')
        var tagInputval = document.getElementById('tagInput').value

        var span01 = document.getElementById('span01')

        if (tagInputval == '') {
            span01.innerHTML = '分类名不能为空！'
        } else {
            $.ajax({
                url: '/admin/addtag',
                data: {'name': tagInputval},
                success: function (data) {
                    if (data === 'success') {
                        // alert(success)
                        alert('添加成功！')
                        // span01.innerHTML = '！'
                        // location.href = '/admin/totag'
                        location.href = '/admin/totagpage'

                    } else {
                        span01.innerHTML = '分类名重复！'

                    }
                }

            })
        }
    }

    function todeletetag(obj) {
        var tagid = $(obj).attr('data-id');
        // alert(tagid)
        // alert(typeid)
        var deleteTagBtn = document.getElementById('deleteTagBtn')
        // deletetype.value = typeid
        deleteTagBtn.value = tagid
    }

    function deletetag(obj) {
        // alert(obj.value)
        var tagid = obj.value;
        alert(tagid)
        $.ajax({
            url: '/admin/deletetag',
            data: {'tagid': obj.value},
            success: function (data) {
                if (data == 'success') {
                    alert('删除成功！')
                    // location.href = '/admin/totag'
                    location.href = '/admin/totagpage'

                } else {
                    alert('删除失败！')
                }
            }
        })
    }

</script>
</body>
</html>
